<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/vue.js"></script>
</head>
<body>
    <div class="box">
        <h1>{{num}}</h1>
        <button v-on:click = 'sum'>点击+1</button> 
        <button v-on:click="num--">点击-1</button>
        <button v-on:click="num = num * 2">点击*2</button>
        <!--能行变量,能写表达式也能写等式,但复杂语句多了就要写到回调函数中-->
        <!-- 简写 -->
        <button @click="quyu">点击 % 2</button>
        <br>
        <h1 @click="testEvent">测试事件对象</h1>
        <h2>事件传入参数</h2>
        <button @click="chuancan('wangyangyang')">测试传参</button>
        <h2>传入实参</h1>
        <button @click="chuancanEvent('666',$event)">测试传实参</button>
    </div>
    <script>
        let vm = new Vue({
            el:'.box',
            data:{
                num:0
            },
            methods:{
                sum(){
                    console.log('111');
                    console.log(this);//在方法当中的this指向当前的vue实例对象
                    // this.num = this.num + 1;
                    // this.num++;
                    // ++this.numl;
                    this.num += 1;
                },

                // sum:()=>{
                //     console.log(111);
                // }

                quyu(){
                    this.num = this.num % 2
                },
                //如果需要事件对象event 需要在回调函数中传递进去
                testEvent(event){
                    console.log(event);
                },

                chuancan(a){
                    console.log(a);
                },
                chuancanEvent(a,event){
                    console.log(a);
                    console.log(event);
                }
            },
        })
    </script>
</body>
</html>